<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>boot1</title>
	
	<style>
		*{
			margin: 0; padding: 0;
			box-sizing: border-box;
		}
		#content{
			border: 1px solid #000;
		}
		#content:after{
			content: "";
			display: block;
			clear: both;
		}
		img{padding: 2px;}
		#content div{
			border: 1px solid #000;
			float: left;
			
		}
		ul{list-style: none}
		li{
			border: 3px solid purple;
			text-decoration: none;
		}
		@media screen and (min-width: 768px){
			#d1{width: 20%}
			#d2{width: 60%}
			#d3{width: 20%}
			#d2 img{width: 25%}
		}
		@media screen and (max-width: 767px) and (min-width: 567px){
			#d1{width: 30%}
			#d2{width: 70%}
			#d3{display: none}
			#d2 img{width: 25%}
		}
		@media screen and (max-width: 575px){
			#d1{width: 100%}
			#d2{width: 100%}
			#d3{width: 100%}
			#d2 img{width: 50%}
		}
		
	</style>
	
</head>
<body>

<div id="content">
	<div id="d1">
		<ul>
			<li><a href="">豆蔻年华</a></li>
			<li><a href="">花样青春</a></li>
			<li><a href="">而立之年</a></li>
			<li><a href="">激情岁月</a></li>
		</ul>
	</div>
	<div id="d2">
		<div>
			<img src="img/1.jpg" ><img src="img/2.jpg" ><img src="img/3.jpg" ><img src="img/4.jpg" >
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eos est illum mollitia, ratione repellat unde? A alias aliquid aut eaque eius nam nulla ratione! Aut commodi quaerat sed vero.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eos est illum mollitia, ratione repellat unde? A alias aliquid aut eaque eius nam nulla ratione! Aut commodi quaerat sed vero.
			</p>
		</div>
		
		
	</div>
	<div id="d3">
		<p>右侧广告. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur cum deleniti dolorem dolores enim eos est hic illum modi officia quae quasi, quibusdam quisquam quo saepe similique vel voluptatum!
		</p>
	</div>
	
	
</div>



</body>
</html>